@layout("/common/_container.html"){

 <div id="wrapper">
     <div id="container">
         <div id="uploader">
            <div class="queueList">
		        <ul class="filelist">
		           @for(item in ottImageList){
		            <li id="${item.id}" class="rep">
		            	<p class="title">${item.showName}</p>
		            	<p class="imgWrap1"> <!-- ,${ctxPath}/static/uploadImage/${item.compressName} -->
		            		<a href="${ctxPath}/static/uploadImage/${item.fileName}" download >
		            		<img class="imgDowload" src="${ctxPath}/static/uploadImage/${item.fileName}"></a>
		            	</p>
		            	<div class="file-panel1" style="height:25px;">
		            		<span class="cancel" >删除</span>
		            		<span class="rotateRight" >向右旋转</span>
		            		<span class="rotateLeft" >向左旋转</span>
		            	</div>
		            </li>
					@}
		        </ul>
        	</div>
        </div>
    </div>
</div>

<script type="text/javascript">

window.onload = function(){
    
    var current = 0;
 
    $(".cancel").each(function(){
    	$(this).click(function(){
    		var imgV=$(this);
        	var imgid = imgV.parents('.rep').attr("id");
    		//alert(imgid);
    		var operation = function(){
                var ajax = new $ax(Feng.ctxPath + "/image/remove", function () {
                    Feng.success("删除成功!");
                    imgV.parents(".rep").remove();
                   // alert(imgid);
                }, function (data) {
                    Feng.error("删除失败!" + data.responseJSON.message + "!");
                });
                ajax.async = true;
                ajax.set("ottImageId", imgid);
                ajax.start();
            };

            Feng.confirm("是否确定删除该图片 ?",operation);
    	});
    });
    $(".rotateLeft").each(function(){
        $(this).click(function(){
        	var imgV=$(this);
        	//alert(imgid);        	
        	operation(imgV,-90);            
        })
    });
    $(".rotateRight").each(function(){
        $(this).click(function(){
        	//var imgid = $(this).parents('.rep').attr("id");
        	var imgV=$(this);
        	operation(imgV,90);
        })
    });
    var operation = function( imgV,rotatingVal){
    	var imgid = imgV.parents('.rep').attr("id");
        var ajax = new $ax(Feng.ctxPath + "/image/rotating", function () {
            //Feng.success("成功!");
            current = (current-90)%360;
            imgV.parents('.rep').find('.imgWrap1').find('img').css("transform","rotate("+current+"deg)");
           // alert(imgid);
        }, function (data) {
            Feng.error("旋转失败!" + data.responseJSON.message + "!");
        });
        ajax.async = true;
        ajax.set("ottImageId", imgid);
        ajax.set("angle", rotatingVal);
        ajax.start();
    };
};
<!--

//-->
</script>
<style>

#uploader .filelist li p.imgWrap1 {
    position: relative;
    z-index: 2;
    line-height: 110px;
    vertical-align: middle;
    overflow: hidden;
    height: 110px;

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webit-transition: 200ms ease-out;
    -moz-transition: 200ms ease-out;
    -o-transition: 200ms ease-out;
    -ms-transition: 200ms ease-out;
    transition: 200ms ease-out;
}

#uploader .filelist div.file-panel1 {
    position: absolute;
    height: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
    background: rgba( 0, 0, 0, 0.5 );
    width: 100%;
    bottom :1px;
    left: 0;
    overflow: hidden;
    z-index: 300;
}

#uploader .filelist div.file-panel1 span {
    width: 24px;
    height: 24px;
    display: inline;
    float: right;
    text-indent: -9999px;
    overflow: hidden;
    background: url(${ctxPath}/static/img/upload-images/icons.png) no-repeat;
    margin: 5px 1px 1px;
    cursor: pointer;
}

#uploader .filelist div.file-panel1 span.rotateLeft {
    background-position: 0 -24px;
}
#uploader .filelist div.file-panel1 span.rotateLeft:hover {
    background-position: 0 0;
}

#uploader .filelist div.file-panel1 span.rotateRight {
    background-position: -24px -24px;
}
#uploader .filelist div.file-panel1 span.rotateRight:hover {
    background-position: -24px 0;
}

#uploader .filelist div.file-panel1 span.cancel {
    background-position: -48px -24px;
}
#uploader .filelist div.file-panel1 span.cancel:hover {
    background-position: -48px 0;
}

</style>
@}
